<w-loader ng-if="$ctrl.pending"></w-loader>

<w-smart-table ng-if="!$ctrl.pending"
               class="smart-table"
               data="$ctrl.orders"
               header-info="$ctrl.headers">

    <div class="order-permission-error error js-order-notification">
        <i class="icon"></i><span w-i18n="directives.myOrders.noPermissionCancelOrder"></span>
    </div>

    <w-empty-block ng-if="!$ctrl.orders.length && !$ctrl.isDemo && !$ctrl.loadingError"></w-empty-block>
    <w-error-block ng-if="$ctrl.loadingError"></w-error-block>

    <div class="sign-in-message" ng-if="$ctrl.isDemo">
        <a ng-if="::$ctrl.userList.length > 0" ui-sref="signIn" class="link" w-i18n="directives.demo.signIn"></a>
        <a ng-if="::$ctrl.userList.length === 0" ui-sref="welcome" class="link" w-i18n="directives.demo.signIn"></a>
        <span w-i18n="directives.demo.or"></span>
        <a ui-sref="create" class="link" w-i18n="directives.demo.createAccount"></a>
        <span w-i18n="directives.demo.to.openorders"></span>
    </div>

    <div class="order-row" ng-class="{'repeatItemTransition': $ctrl.showAnimations}" ng-if="!$ctrl.loadingError"
         ng-repeat="order in $data track by order.id">
        <w-table-row class="{{::order.type}}"
                     ng-class="{
                     'new-order': order.isNew,
                     'can-expand': !!order.exchange.length,
                     'disabled': $ctrl.isLockedPair(order.amount.asset.id, order.price.asset.id)
                     }">
            <w-table-cell>
                <span ng-class="{underline: !$ctrl.isSelected(order)}"
                      class="cell_set-pair"
                      ng-click="$ctrl.setPair(order)">
                    <a href="#">{{::order.pair}}</a>
                </span>
            </w-table-cell>
            <w-table-cell>
                <span w-i18n="directives.myOrders.orderType.{{::order.type}}"></span>
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.time"></span></span>
                {{ ::order.timestamp | date:'MM-dd HH:mm:ss' }}
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.amount"></span></span>
                <w-balance short-mode="::true" money="::order.amount"></w-balance>
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.price"></span></span>
                <w-balance short-mode="::true" money="::order.price"></w-balance>
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.average"></span></span>
                <w-balance short-mode="::true" money="::order.average"></w-balance>
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.total"></span></span>
                <w-balance short-mode="::true" money="::order.total"></w-balance>
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.filled"></span></span>
                <w-balance short-mode="::true" money="::order.filledTotal"></w-balance>
            </w-table-cell>
            <w-table-cell>
                <span class="cell-label"><span w-i18n="directives.myOrders.fee"></span></span>
                <span w-i18n="money-currency" params="::{money: order.fee}"></span>
            </w-table-cell>
            <w-table-cell>
                <div ng-class="{cancelled: order.isCancelled}" class="status">
                    <div class="progress-precents">
                        {{$ctrl.round(order.percent)}}%
                        <span ng-if="::order.isCancelled" w-i18n="directives.myOrders.cancelled"></span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: {{order.percent}}%"></div>
                    </div>
                    <div class="circle-holder">
                        <div class="circle-loader"
                             ng-class="{over50: order.progress > 0.5}">
                            <span>{{$ctrl.round(order.percent)}}%</span>
                            <div class="left-half-clipper">
                                <div class="first50-bar"></div>
                                <div class="value-bar"
                                     style="transform: rotate({{order.progress * 360}}deg)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </w-table-cell>
            <w-table-cell ng-if="$ctrl.isActiveOrders && $ctrl.orders.length" class="cell_stop">
                <div ng-click="$ctrl.dropOrder(order)"
                     w-i18n="directives.myOrders.cancel"
                     class="stop"></div>
            </w-table-cell>
            <div class="tooltip-dex tooltip-row center"
                 ng-if="$ctrl.isLockedPair(order.amount.asset.id, order.price.asset.id)"
                 w-i18n="directives.myOrders.placeholders.lockedPair"
                 params="{
                     amountAssetTicker: order.amount.asset.ticker || order.amount.asset.displayName,
                     priceAssetTicker:  order.price.asset.ticker || order.price.asset.displayName
                 }"></div>
        </w-table-row>
    </div>
</w-smart-table>
